<template>
  <a-popover>
    <div class="text-limit-two cursor">{{ data.selKey.join('，') }}</div>
    <template #content>
      <a-space>
        <a-input v-model="searchValue" placeholder="请输入内容" allow-clear @clear="search" />
        <a-button class="gray-outline" @click="search">搜索</a-button>
      </a-space>
      <div class="mt5" style="width: 500px; height: 280px">
        <a-table :pagination="false" :data="searchList" :scroll="{ x: '100%', y: '100%' }">
          <template #columns>
            <a-table-column title="属性值" #cell="{ record }" :width="260">
              {{ record }}
            </a-table-column>
            <a-table-column title="操作" #cell="{ record, rowIndex }" :width="40">
              <a-button type="text" style="color: red" @click="searchList.splice(rowIndex, 1)">删除</a-button>
            </a-table-column>
          </template>
        </a-table>
      </div>
    </template>
  </a-popover>
</template>

<script lang="ts" setup>
  import { onMounted, ref, watch } from 'vue'
  import _ from 'lodash-es'
  let props = defineProps({
    data: {
      default: {},
      type: Object,
    },
  })
  let searchList = ref([])
  let searchValue = ref('')

  const search = () => {
    if (searchValue.value) {
      searchList.value = props.data.selKey.filter((e: any) => e.indexOf(searchValue.value) > -1)
    } else {
      searchList.value = props.data.selKey
    }
  }

  watch(
    () => props.data,
    () => {
      searchList.value = props.data.selKey
    },
    {
      immediate: true,
    }
  )
</script>

<style lang="less" scoped></style>
